<template>
  <app-container :percept="percept">
    <view class="container">
      <app-navbar class="nav" backgroundColor="#201836" useCenterSlot useLeftSlot>
        <template #left>
          <div class="nav-back">
            <image class="image_4 pos" src="@/static/common/back.png" @click="backToMine" />
          </div>
        </template>
        <template #center>
          <text class="nav-title">设置</text>
        </template>
      </app-navbar>
      <view class="flex-col group1">
        <view class="flex-row list-item justify-between" v-for="(item, index) in items1" :key="index" @click="item.click">
          <view class="flex-row">
            <image class="shrink-0 self-start image_5" :src="item.icon" />
            <text class="font_2 text_3 ml-12">{{ item.text }}</text>
          </view>
          <text class="font_2 text_3" v-if="item.value">{{ item.value }}</text>
          <u-icon class="font_2 text_3" :name="item.arrow" v-if="item.arrow"></u-icon>
        </view>
      </view>

      <view class="flex-col group1">
        <view class="flex-row list-item justify-between" v-for="(item, index) in items2" :key="index" @click="item.click">
          <view class="flex-row">
            <view class="flex-row" <image class="shrink-0 self-start image_5" :src="item.icon" />
            <text class="font_2 text_3 ml-12">{{ item.text }}</text>
          </view>
          <text class="font_2 text_3" v-if="item.value">{{ item.value }}</text>
          <u-icon class="font_2 text_3" v-if="item.arrow" :name="item.arrow"></u-icon>
        </view>
      </view>

      <view class="flex-col group1">
        <view class="flex-row list-item justify-between" v-for="(item, index) in items3" :key="index" @click="item.click">
          <view class="flex-row">
            <image class="shrink-0 self-start image_5" :src="item.icon" />
            <text class="font_2 text_3 ml-12">{{ item.text }}</text>
          </view>
          <view class="flex-row">
            <text class="font_2 text_3 extra" v-if="item.value">{{ item.value }}</text>
            <u-icon class="font_2 text_3" v-if="item.arrow" :name="item.arrow"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <PasswordChange1 style="z-index: 1000" v-if="password1Show" :email="email" @close="password1Show = false" />
    <PasswordChange2 style="z-index: 1000" v-if="password2Show" :email="email" @close="password2Show = false" />
  </app-container>
</template>

<script>
import { mapGetters } from 'vuex';
import lifecycleMixin from '@/mixins/lifecycle.js';
import AppNavbar from '@/components/AppNavbar.vue';
import PasswordChange1 from './components/PasswordChange1.vue';
import PasswordChange2 from './components/PasswordChange2.vue';

export default {
  mixins: [lifecycleMixin],
  components: { AppNavbar, PasswordChange1, PasswordChange2 },
  mounted() {
    this.items1[0].value = this.profile.parentInviteCode;

    this.email = this.profile.email;
  },
  data() {
    return {
      email: '',
      password1Show: false,
      password2Show: false,
      items1: [
        { text: this.$t('mine.bindInviter'), icon: '/static/settings/bind-invite.png', value: '' },
        {
          text: this.$t('mine.invite'),
          icon: '/static/settings/inviter.png',
          arrow: 'arrow-right',
          click: () => {
            uni.navigateTo({ url: '/pages/mine/invitation/index' });
          }
        },
        {
          text: this.$t('mine.selectLanguage'),
          icon: '/static/settings/language.png',
          arrow: 'arrow-right',
          key: 'selectLanguage',
          click: () => {
            uni.navigateTo({ url: '/pages/mine/settings/SelectLanguage' });
          }
        }
      ],
      items2: [{
          text: this.$t('mine.userAgreement'),
          icon: '/static/settings/user-agreement.png',
          arrow: 'arrow-right',
          click: () => {
            uni.navigateTo({ url: '/pages/mine/settings/UserAgreement' });
          }
        },
        {
          text: this.$t('mine.privacyAgreement'),
          icon: '/static/settings/privacy-agreement.png',
          arrow: 'arrow-right',
          click: () => {
            uni.navigateTo({ url: '/pages/mine/settings/PrivacyAgreement' });
          }
        }
      ],
      items3: [{
          text: this.$t('mine.accountPassword'),
          icon: '/static/settings/account-password.png',
          value: this.$t('mine.modify'),
          arrow: 'arrow-right',
          click: () => {
            this.password1Show = true;
          }
        },
        {
          text: this.$t('mine.reflectPassword'),
          icon: '/static/settings/account-password.png',
          value: this.$t('mine.setup'),
          arrow: 'arrow-right',
          click: () => {
            this.password2Show = true;
          }
        },
        {
          text: this.$t('mine.logout'),
          icon: '/static/settings/logout.png',
          click: () => {
            console.log('xxxxx')
            uni.reLaunch({
              url: '/pages/firstPage/index'
            });
          }
        }
      ]
    };
  },
  computed: {
    ...mapGetters({
      profile: 'user/getProfile'
    })
  },
  methods: {
    backToMine() {
      uni.switchTab({
        url: '/pages/mine/index'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  min-height: 100%;
  background-color: #140c2b;

  .nav {
    .nav-back {
      .image_4 {
        border-radius: 0.5rem;
        width: 1.78rem;
        height: 1.78rem;
      }

      .pos {
        position: absolute;
        left: 0.98rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .nav-title {
      color: #fff;
      text-align: center;
      font-size: var(--app-navbar__txt_size);
    }
  }

  .group1 {
    margin: 1rem 0;
  }

  .list-item {
    padding: 1rem 1.25rem;
    background-color: #201836;
    border-top: solid 1px #ffffff0d;
    border-bottom: solid 1px #ffffff0d;

    .image_5 {
      width: 1.19rem;
      height: 1.19rem;
    }

    .font_2 {
      font-size: 1rem;
      font-family: PingFang SC;
      line-height: 0.93rem;
      color: #ffffff;
    }

    .text_3 {
      // margin-right: 14.25rem;
      line-height: 1.19rem;
    }

    .extra {
      font-size: 12px;
    }
  }
}
</style>